<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="applicable-device" content="mobile">
	<title>众筹</title>
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
	<div class="container">
		<div class="top-bar">
            众筹
            <a href="myCrow.html">我的众筹</a>
        </div>

		<!-- 首页banner开始 -->
			<div class="swiper-container banner-container">
			      <div class="swiper-wrapper">
			        <div class="swiper-slide"><img src="img/banner.png" alt=""></div>
			        <div class="swiper-slide"><img src="img/banner.png" alt=""></div>
			        <div class="swiper-slide"><img src="img/banner.png" alt=""></div>
			      </div>
	      			<div class="swiper-pagination"></div>
	    	</div>
	    <!-- 首页banner结束 -->
	
		<!-- 分类开始 -->
	    <!-- <div class="cate">
                    <h2 class="active">全部</h2>
                    <div class="swiper-container  cate-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"><a href="#">女装</a></div>
                            <div class="swiper-slide"><a href="#">童装</a></div>
                            <div class="swiper-slide"><a href="#">男装</a></div>
                            <div class="swiper-slide"><a href="#">内衣</a></div>
                            <div class="swiper-slide"><a href="#">鞋靴</a></div>
                        </div>
                        <div class="swiper-button-next swiper-button-black"></div>
                    </div>
                </div> -->
        <!-- 分类结束 -->

        <div class="cate">
            <span class="active crowing">众筹中</span>
            <span class="crowed">众筹结束</span>
        </div>
        
        <input type="hidden" value="crowing" class="view">

        <div class="list crowing-list">
        	<a href="detail.html" class="list-item cl">
        		<dl class="cl">
        			<dt style="background:url('img/socks.png') no-repeat 50% 50%;background-size:cover;"></dt>
        			<dd class="title">淘宝爆款 夏季素色小清新纯色女船袜 短袜 袜子纯棉 袜子</dd>
        			<dd class="middle">
        				<span class="left">众筹价<em>￥5.68</em></span>
        				<span class="right">20双起</span>
        			</dd>
        			<dd class="bottom">
        				<span class="left">已筹集<strong>￥568</strong></span>
        				<span class="right"><i>达成率20%</i></span>
        				<span class="bg-right" style="width:0.77rem;"></span>
        			</dd>
        		</dl>
        	</a>

        	<a href="detail.html" class="list-item cl">
        		<dl class="cl">
        			<dt style="background:url('img/socks.png') no-repeat 50% 50%;background-size:cover;"></dt>
        			<dd class="title">淘宝爆款 夏季素色小清新纯色女船袜 短袜 袜子纯棉 袜子</dd>
        			<dd class="middle">
        				<span class="left">众筹价<em>￥5.68</em></span>
        				<span class="right">20双起</span>
        			</dd>
        			<dd class="bottom">
        				<span class="left">已筹集<strong>￥568</strong></span>
        				<span class="right"><i>达成率50%</i></span>
        				<span class="bg-right" style="width:0.45rem;"></span>
        			</dd>
        		</dl>
        	</a>

        	
        </div>

        <div class="list crowed-list">
            <a href="detail.html" class="list-item cl">
                <div class="layer"></div>
                <div class="crow">众筹结束</div>
                <dl class="cl">
                    <dt style="background:url('img/socks.png') no-repeat 50% 50%;background-size:cover;"></dt>
                    <dd class="title">淘宝爆款 夏季素色小清新纯色女船袜 短袜 袜子纯棉 袜子</dd>
                    <dd class="middle">
                        <span class="left">众筹价<em>￥5.68</em></span>
                        <span class="right">20双起</span>
                    </dd>
                    <dd class="bottom">
                        <span class="left">已筹集<strong>￥568</strong></span>
                        <span class="right"><i>达成率1120%</i></span>
                        <span class="bg-right" style="width:0rem;"></span>
                    </dd>
                </dl>
            </a>
            <a href="detail.html" class="list-item cl">
                <div class="layer"></div>
                <div class="crow">众筹结束</div>
                <dl class="cl">
                    <dt style="background:url('img/socks.png') no-repeat 50% 50%;background-size:cover;"></dt>
                    <dd class="title">淘宝爆款 夏季素色小清新纯色女船袜 短袜 袜子纯棉 袜子</dd>
                    <dd class="middle">
                        <span class="left">众筹价<em>￥5.68</em></span>
                        <span class="right">20双起</span>
                    </dd>
                    <dd class="bottom">
                        <span class="left">已筹集<strong>￥568</strong></span>
                        <span class="right"><i>达成率1120%</i></span>
                        <span class="bg-right" style="width:0rem;"></span>
                    </dd>
                </dl>
            </a>
        </div>

	</div>

	<script type="text/javascript" src="js/zepto.min.js"></script>
  	<script type="text/javascript" src="js/swiper.jquery.min.js"></script>
  	<script type="text/javascript">
  		$(function(){
  			var mySwiper = new Swiper(".banner-container",{
		      initialSlide:3,
		      speed:2000,
		      loop:true,
		      autoplay:1000,
		      autoplayDisableOnInteraction:false,
		      pagination:".swiper-pagination",
		    });


            $(".crowing").click(function () {
                $(this).addClass('active');
                $(".crowed").removeClass('active');
                $(".crowing-list").show();
                $(".crowed-list").hide();
                $(".view").val("crowing");
            });

            $(".crowed").click(function () {
                $(this).addClass('active');
                $(".crowing").removeClass('active');
                $(".crowing-list").hide();
                $(".crowed-list").show();
                $(".view").val("crowed");
            });

		     /*var cate = new Swiper('.cate-container', {
                slidesPerView      : 4,
                paginationClickable: true,
                spaceBetween       : 0,
                loop               : true,
                autoplay           : false,
                //prevButton:'.swiper-button-prev',
                nextButton         : '.swiper-button-next',
            });*/
  		});
  	</script>
</body>
</html>